window.addEventListener('load', function() {
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focuswidth = focus.offsetWidth;
    //鼠标经过就 显示隐藏左右按钮
    focus.addEventListener('mouseenter', function(){
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; //清楚定时器变量
    })
    focus.addEventListener('mouseleave', function(){
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    })
    //3.动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for(var i =0; i < ul.children.length; i++) {
        //创建一个LI 
        var li = document.createElement('li');
        //通过自定义记录当前小圆圈的索引号 用自定义属性来做
        li.setAttribute('index', i);
        //把小LI插入OL里
        ol.appendChild(li);
        //小圆圈排他思想  生成小圆圈的同时绑定点击事件
        li.addEventListener('click', function() {
            //干掉所有人  把所有li 清除类名current
            for(var i = 0; i < ol.children.length; i++){
                ol.children[i].className = '';
            }
            //留下我自己 当前的小li 设置类名current
            this.className = 'current';
            //5.点击小圈 移动图片
            //ul移动的距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            //当点击某个小li 就拿到当前小li的索引号
            var index = this.getAttribute('index');
            //当点击某个小LI就要把LI的索引号给num
            num = index;
            //当点击某个小LI就要把LI的索引号给circle
            circle = index;
            //num = circle = index;
            animate(ul, -index * focuswidth);
        })
    }
    //把ol里面的第一个li设置类名为current
    ol.children[0].className = 'current';
    //6.克隆第一种图片放在ul最后 ,再小圆圈生成后添加克隆不会加圈
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //7.点击右侧按钮，图片滚动一张
    var num = 0;
    //circle控制小圆圈的播放
    var circle = 0;
    //flag节流阀 防止图片点击过快
    var flag = true;
    arrow_r.addEventListener('click', function() {
        if(flag) {
            flag = false; //关闭节流阀
            //如果走到最后复制的最后一张 此时ul 要快速复原 left改为0
        if(num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focuswidth, function() {
            flag = true;// 一张图片播完后 打开节流阀
        });
        //8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圈的播放
        circle++;
        //判断 circle==5 说明走到最后我们克隆的最后一张图片了
        if(circle == ol.children.length) {
            circle = 0;
        }
        //排他 调用函数
        circleChange();
        }  
    })
    // 9.左侧按钮
    arrow_l.addEventListener('click', function() {
        if(flag) {
            flag = false;
            //如果走到最后复制的最后一张 此时ul 要快速复原 left改为0
        if(num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focuswidth + 'px';
        }
        num--;
        animate(ul, -num * focuswidth, function(){
            flag = true;
        });
        //8. 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圈的播放
        circle--;
        //判断 circle<0 说明走到第一张图片，则小圆圈要改为第四个小圆圈（4）
        //if(circle < 0) {
        //    circle = ol.children.length - 1;
       // } 可用三元表达式代替
       circle = circle < 0 ? ol.children.length - 1 : circle;
        //调用函数
        circleChange();
        }
        
    })
    //封装函数circleChange(){}
    function circleChange() {
        //排他  先清除其余小圆圈的类名current
        for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        //留下当前小圆圈的类名current
        ol.children[circle].className = 'current';
    }
    //10.定时器
    var timer = setInterval(function() {
        //手动调用点击事件
        arrow_r.click();
    }, 2000);
})